<template>
  <div class="app-container">
    <!--工具栏-->
    <div>
      <div
        v-if="crud.props.searchToggle"
        class="crud-group"
      >
        <!-- 搜索 -->
        <el-select
          v-model="queryForm.type"
          clearable
          size="small"
          placeholder="来源类型"
          class="filter-item"
        >
          <el-option
            v-for="item in typeList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
        <el-select
          v-model="queryForm.sendType"
          clearable
          size="small"
          placeholder="发送类型"
          class="filter-item"
        >
          <el-option
            v-for="item in sendList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
        <el-select
          v-model="queryForm.switch"
          clearable
          size="small"
          placeholder="开关"
          class="filter-item"
        >
          <el-option
            v-for="item in switchList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
        <el-input
          v-model="queryForm.user"
          clearable
          size="small"
          placeholder="接收人"
          style="width:200px"
          class="filter-item"
        />
        <rrOperation :crud="crud" />
      </div>
      <crudOperation
        show=""
        :permission="permission"
      />
    </div>
    <!--表单渲染-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible.sync="crud.status.cu > 0"
      title="新增"
      width="800px"
    >
      <el-form
        :inline="true"
        label-width="120px"
      >
        <el-form-item label="来源类型">
          <el-select
            v-model="addForm.type"
            clearable
            size="small"
            placeholder="请选择"
            class="filter-item"
            style="width:190px"
          >
            <el-option
              v-for="item in typeList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="发送类型">
          <el-select
            v-model="addForm.sendType"
            clearable
            size="small"
            placeholder="请选择"
            class="filter-item"
            style="width:190px"
          >
            <el-option
              v-for="item in sendList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="开关">
          <el-select
            v-model="addForm.switch"
            clearable
            size="small"
            placeholder="请选择"
            class="filter-item"
            style="width:190px"
          >
            <el-option
              v-for="item in switchList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="发送主题">
          <el-input
            v-model="addForm.theme"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="接收人名称">
          <el-input
            v-model="addForm.name"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="接收人电话">
          <el-input
            v-model="addForm.phone"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="crud.cancelCU"
        >保存</el-button>
        <el-button
          type="primary"
          @click="crud.cancelCU"
        >取消</el-button>
      </div>
    </el-dialog>
    <!--表格渲染-->
    <el-table
      ref="table"
      :data="tableList"
      row-key="id"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        label="来源类型"
        prop="type"
      />
      <el-table-column
        label="发送类型"
        prop="send"
      />
      <el-table-column
        label="接收人"
        prop="user"
      />
      <el-table-column
        label="开关"
        prop="switch"
      />
      <el-table-column
        label="创建时间"
        prop="time"
      />
      <el-table-column
        label="发布主题"
        prop="theme"
      />
      <el-table-column
        label="操作"
        align="center"
        width="300"
      >
        <template>
          <el-button type="text">加入发布列表</el-button>
          <el-button type="text">查看</el-button>
          <el-button type="text">修改</el-button>
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'

// crud交由presenter持有
const defaultCrud = CRUD({ title: '', url: '', crudMethod: {} })
const defaultForm = {}
export default {
  name: '',
  components: { crudOperation, rrOperation },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {
      permission: {
        add: [],
        edit: ['edit'],
        del: ['del']
      },
      queryForm: {
        type: '',
        sendType: '',
        switch: '',
        user: ''
      },
      tableList: [
        {
          type: '同步功能',
          send: '钉钉',
          user: '张三',
          switch: '开',
          time: '2023-08-05 17:52:33',
          theme: '数据同步'
        }
      ],
      typeList: ['同步功能', '数据导出', '数据装载', '数据还原', '跨库比对', '数据脱敏', '打包发布', '代码扫描', '脚本同步', '文件推送'],
      sendList: ['企业微信', '钉钉'],
      switchList: ['开', '关'],
      addForm: {
        type: '',
        sendType: '',
        switch: '',
        theme: '',
        name: '',
        phone: ''
      }
    }
  },
  methods: {

  }
}
</script>
